<template>
  <div class="box">
    <!-- <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
    /> -->
    <p style="text-align:left;background:#fff;padding:10px;margin:0px;overflow-x:scroll;white-space:nowrap"><span
        style="color:#1989fa"
        @click="Mail_list"
      >通讯录</span>
      <span
        v-for="(li,i) in arr"
        :key="i"
      ><span @click="showlist(li)"> > {{li}}</span></span></p>
    <van-checkbox
      icon-size="24px"
      v-model="isCheckAll"
      @click="checkAll()"
    ><span>全选</span></van-checkbox>
    <!-- @click="checkAll" -->
    <div style="height:10px;background:#F7F8FA"></div>
    <div style="height:75vh;overflow:scroll;">
      <van-checkbox-group
        v-model="result"
        ref="checkboxGroup"
        class="personality-filter"
      >
        <div class="ellipsis">
        <div
          v-show="people"
          style="position:relative;"
          v-for="(item,i) in depart"
          :key="i+'12'"
        >
          <van-checkbox
            icon-size="24px"
            :name="item.dingding_id"
            ref="data_checked"
            @click="showEverybody(item,$event)"
          >{{item.name}}(<span>{{item.userNumber}}</span>人)
          </van-checkbox>
          <!-- <span
           v-if="item.ischecked==true"
            class="right"
            style="color:silver"
            ref="next"
          >下级</span> -->
          <span
            class="right list-body-item"
            ref="next"
            @click="showPersonnel(item)"
          >下级</span>
        </div>
        </div>
      </van-checkbox-group>
      <van-checkbox-group
        v-model="result_list"
        ref="checkboxGroup"
      >
        <div
          style="position:relative"
          v-for="(it,j) in userArr"
          :key="j+'22'"
        >
          <van-checkbox
            icon-size="24px"
            :name="it.dd_id"
            ref="data_checked"
            @click="show_personal(it)"
          >
            <span
              class="personnel_text"
              v-if="it.name.length<3"
            > {{((it.name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}</span>
            <span
              class="personnel_text"
              v-else-if="it.name.length>=3"
            > {{((it.name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}</span>
            {{it.name}}
          </van-checkbox>
        </div>
      </van-checkbox-group>
    </div>
    <van-cell
      style="border-top:1px solid #c0c0c06e"
      class="btn"
      center
      :title="'已选择：'+Total_num+'/20人'"
    >
      <van-button
        round
        size="small"
        type="info"
        @click="show_Determine"
      >确定</van-button>
    </van-cell>
    <!-- </van-popup> -->
  </div>
</template>

<script type="text/javascript">
import { Search, Checkbox, CheckboxGroup, Button, Cell, Toast } from "vant";
export default {
  name: "dapart",
  data() {
    return {
      next_show: 1,
      value: "",
      result: [],
      result_list: [],
      isCheckAll: false,
      people: true,
      depart: [],
      userArr: [],
      arr: [],
      Total_num: 0,
      item_list: [],
      personal_list: [],
      checksListOn: [],
      checkList: [],
      result_str: "",
      checked: false
    };
  },
  components: {
    [Search.name]: Search,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Button.name]: Button,
    [Cell.name]: Cell
  },
  created() {
    this.showDepart();
    dd.biz.navigation.setTitle({
      title: "选择人员" //控制标题文本，空字符串表示显示默认文本
    });
  },
  methods: {
    
    // 人员选择
    show_personal(it) {
      // this.Total_num = this.result_list.length;
      // let is_cheked=$event.currentTarget.getAttribute('aria-checked');
      // if()
      // let index = this.personal_list.indexOf(it);
      // if (index <= -1) {
      //   this.personal_list.push(it);
      // } else {
      //   this.personal_list.splice(index, 1);
      // }
    },
    // 确定按钮
    show_Determine() {
      let userList_name = "";
      let depart_length = 0;
      for (let i = 0; i < this.depart.length; i++) {
        if (this.result.indexOf(this.depart[i].dingding_id) > -1) {
          userList_name = this.depart[i].userList[i].name;

          depart_length += this.depart[i].userList.length;
        }
      }
      this.Total_num = depart_length + this.result_list.length;
      for (let j = 0; j < this.userArr.length; j++) {
        if (this.result_list.indexOf(this.userArr[j].dd_id) > -1) {
          userList_name = this.userArr[j].name;
          if (this.result.length == 0) {
            this.Total_num = this.result_list.length;
          }
        }
      }
      if (this.Total_num >= 20) {
        this.$toast("最多可选20人");
      } else {
        let query = {
          list: this.result_list.concat(this.result),
          userList_name: userList_name,
          total: this.Total_num
        };
        this.$emit("toParent", query);
      }
    },
    // 通讯录
    Mail_list() {
      this.people = true;
      this.arr = [];
      this.depart =[];
      this.userArr = [];
      this.showDepart();
      let i_cheked = this.$refs.data_checked;
    },
    // 部门选择
    showEverybody(it, $event) {
      this.checksListOn.push(it);
      let index = this.checksListOn.indexOf(it);
      if (index <= -1) {
        this.checksListOn.push(it);
      } else {
        it.ischecked = false;
        this.checksListOn.splice(index, 1);
      }
    },
    showlist(li) {
      let depart_list = this.item_list;
      let arr_list = this.arr;
      $.each(depart_list, (i, val) => {
        if (li == val.name) {
          this.people = true;
          this.arr = arr_list.splice(0, i + 1);
          if (val.son_dept != undefined) {
            this.depart = val.son_dept;
            this.userArr = val.userList;
          } else {
            if (val.userList.length != 0) {
              this.people = false;
              this.userArr = val.userList;
            }
          }
        }
      });
    },
    // 下级
    showPersonnel(item) {
      this.item_list.push(item);
      this.arr.push(item.name);
      if (item.son_dept != undefined) {
        this.depart = item.son_dept;
        this.userArr = item.userList;
      } else {
        if (item.userList.length != 0) {
          this.people = false;
          this.userArr = item.userList;
        }
      }
    },
    // 人员显示ding8f30b8b37b1b4421
    async showDepart() {
      let corpId = this.$utils.getUrlKey("custid");
      const res = await this.$http.get(
        `yuepoints/dept?corpId=${corpId}&type=1`
      );
      const {
       son_dept, userList
      } = res.data.data;
      if(son_dept.son_dept && son_dept.userList){
       const errcode = res.data;
          for (let i = 0; i < son_dept.length; i++) {
        son_dept[i]["ischecked"] = false;
      }
      if (errcode !== "1005") {
          this.$forceUpdate();
          this.depart.push(son_dept);
          this.userArr = userList;
      } else {
        this.depart = [];
        this.userArr = [];
      }
      }else if(son_dept.userList){
        const errcode = res.data;
        if (errcode !== "1005") {
          this.$forceUpdate();
          this.depart.push(son_dept);
          this.userArr = userList;
      } else {
        this.depart = [];
        this.userArr = [];
      }
      }else{
         const errcode = res.data;
          for (let i = 0; i < son_dept.length; i++) {
        son_dept[i]["ischecked"] = false;
      }
      if (errcode !== "1005") {
        this.$forceUpdate();
          this.depart = son_dept;
          this.userArr = userList;
        
      } else {
        this.depart = [];
        this.userArr = [];
      }

      }
    },
    // 全选
    checkAll() {
      if (!this.isCheckAll) {
        let user_list = this.depart;
        let num = 0;
        let Total_num = 0;
        let str = "";
        let user_id = this.userArr;
        if (this.people == false) {
          Total_num = this.userArr.length;
          for (let j = 0; j < user_id.length; j++) {
            str += `${user_id[j].dd_id},`;
          }
        } else {
          let arr = [];
          let arrstr = "";
          let user_str = "";
          for (let i = 0; i < user_list.length; i++) {
            num += user_list[i].userList.length;
            arr = user_list[i].userList;
            for (let k = 0; k < arr.length; k++) {
              arrstr += `${arr[k].dd_id},`;
            }
          }
          for (let t = 0; t < user_id.length; t++) {
            user_str += `${user_id[t].dd_id},`;
          }
          str = '"' + arrstr + user_str + '"';
          Total_num = num + this.userArr.length;
        }
        this.Total_num = Total_num;
        this.result_str = str;
        this.isCheckAll = true;
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll();
        this.Total_num = 0;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 15px;
  padding: 18px 0px 0px;
  padding-bottom: env(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
  .btn {
    padding-bottom: env(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
  }
  .van-icon__checked::before {
    content: "\F0C8";
  }
  /deep/ .van-cell__title {
    text-align: left;
  }
  .ellipsis{
    width: 100%;
  }
    /deep/ .van-checkbox-group,
    .van-checkbox {
      background: #fff;
    /deep/.van-checkbox__label{
        text-align: left;
        width: 40%;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        .personnel_text{
          text-align: center;
        }
    }
  }
  
  /deep/ .van-checkbox {
    padding: 10px;
    border-bottom: 1px solid rgb(230, 227, 227);
  }
  .van-cell--center {
    position: fixed;
    bottom: 0px;
  }
  // /deep/ .van-checkbox__label{
  //   display: inline-block;
  //   width: 100%;
  // }
  .personnel_text {
    display: inline-block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #59d1ff;
    font-size: 14px;
    line-height: 42px;
    color: #fff;
  }
}
.left {
  float: left;
}
.right {
  float: right;
  font-size: 14px;
  color: #1989fa;
  border-left: 1px solid silver;
  padding-left: 5px;
  position: absolute;
  top: 12px;
  right: 12px;
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>
